<html>
	<head>
		<link rel="stylesheet" type="text/css" href="fonts/HelveticaNeueBold/HelveticaNeueBold.css" />
		<link rel="stylesheet" type="text/css" href="fonts/HelveticaNeueLight/HelveticaNeueLight.css" />
		<link rel="stylesheet" type="text/css" href="controls.css" />
		<style>
		body{
			margin:0;
			padding:0;
			background-image:url('img-ele/back-mini.png');
		}
		#top{
			background-image:url('img-ele/top.png');
			background-size:100%;
			background-repeat:no-repeat;
			height:43px;
			text-align: center;
			font-family:"HelveticaNeueBold";
			font-size:2em;
			color:white;
			vertical-align:middle;
			padding-top:5px;
			width:1024px;
		}
		#wrapper{
			width:1024px;
			margin-top:-6px;
			position: relative;
			height:600px;
		}
		#left-side{
			width:330px;
			float:left;
		}
		#right-side{
			
			
		}
		.header-sub{
			font-family:"HelveticaNeueBold";
			font-size:1.3em;
			width:100%;
			background:url("img-ele/header-sub-back.png");
			height:44px;
			text-align:center;
			vertical-align:middle;
			line-height: 2.5em;
			
		}
		#division{
			background: url("img-ele/middle-bar.png") center;
			width:12px;
			height:100%;
			position: absolute;
			left:325px;
		}
		#btn-left{
			width:104px;
			height:49px;
			background:url("img-ele/button-bar_01.png");
			float:left;
		}
		#btn-mid{
			width:99px;
			height:49px;
			background:url("img-ele/button-bar_02.png");
			float:left;
		}
		#btn-right{
			width:104px;
			height:49px;
			background:url("img-ele/button-bar_03.png");
			float:left;
		}
		#button-bar{
			padding:10px;
			height:49px;
		}
		#btn-left:hover{
			width:104px;
			height:49px;
			background:url("img-ele/button-bar-over_01.png");
			float:left;
			cursor:hand;
		}
		#btn-mid:hover{
			width:99px;
			height:49px;
			background:url("img-ele/button-bar-over_02.png");
			float:left;
			cursor:hand;
		}
		#btn-right:hover{
			width:104px;
			height:49px;
			background:url("img-ele/button-bar-over_03.png");
			float:left;
			cursor:hand;
		}
	    #pnl-ord{
	    	margin-left:9px;
	    	width:295px;
	    	padding:7px;
	    	padding-bottom:10px;
	    }

	    .order-item{
	    	border:none;
	    	height:40px;
	    	padding-bottom:4px;
	    	font-family:"HelveticaNeueLight";
			font-size:1.5em;
			vertical-align:middle;
			line-height: 2.3em;
			
			position:relative;
	    }
	    .order-item-detail{
	    	position:absolute;
	    	left:10px;
	    }
	    .order-item-action{
	    	background:url("img-ele/item-delete-icon.png");
	    	width:28px;
	    	height:28px;
	    	float:right;
	    	cursor:hand;
	    	margin-top:5px;
	    }
	    .order-item-number{
	    	margin-top:5px;
	    	float:right;
	    	width:39px;
	    	height:27px;
	    	background:url("img-ele/numberpill.png") no-repeat bottom;
	    	font-family:"HelveticaNeueBold";
	    	font-size:16px;
	    	color:white;
	    	text-align:center;
	    	vertical-align:top;
	    	line-height:1.5em;
	    	cursor:hand;
	    }
	    #sl-cat-wrapper{
	    	font-family:"HelveticaNeueBold";
			font-size:1.5em;
			
	    }
	    #sl-category{
	    	width:350px;
	    	border:none;
	    	background:none;
	    	font-family:"HelveticaNeueLight";
	    	font-size:20px;
	    }
	    #pnl-menu{
	    	margin-left:9px;
	    	width:600px;
	    	padding:7px;
	    	padding-bottom:10px;
	    	float:left;
	    }
	    .menu-item{
	    	border:none;
	    	height:40px;
	    	padding-bottom:4px;
	    	font-family:"HelveticaNeueLight";
			font-size:1.3em;
			line-height: 1.4em;
			position:relative;
	    }
	    .menu-item-detail{
	    	float:left;
	    	margin-left:5px;
	    }
	    .menu-item-price{
	    	font-family:"HelveticaNeueBold";
	    	font-size:1.3em;
	    	float:right;
	    }
	    .menu-item-action{
	    	float:right;
	    	background:url("img-ele/add-icon.png");
	    	width:28px;
	    	height:28px;
	    	cursor:hand;
	    	margin-right:10px;
	    	margin-top:10px;
	    	margin-left:10px;
	    }
		</style>
		
	</head>
	<body>
		<script src="jquery-1.4.2.min.js"></script>
		<script src="jquery-ui-1.8.13.custom.min.js"></script>
		<script src="jquery.dimensions.pack.js"></script>
		<script src="jquery.combobox.packed.js"></script>
		<script src="ulti.js"></script>
		<script src="jquery.multiple-bgs.min.js"></script>
		<script src="btn-back.js"></script>
		<script src="json2.js"></script>
		<script>idv=location.toString().match(/id=([^&#]*)/)[1];
			tid=location.toString().match(/table=([^&#]*)/)[1]</script>
		<div id="btn-back" class="btn-back" onclick="window.location='waiter.htm?id='+idv;"></div>
		<div id="top">
			Order #<script>document.write(location.toString().match(/table=([^&]*)/)[1])</script>
		</div>
		<div id="wrapper">
			<div id="division"></div>
			<div id="left-side">
				<div class="header-sub">
					Orders
				</div>
				<div id="button-bar">
					<div id="btn-left" onclick="update()"></div>
					<div id="btn-mid" onclick="bill()"></div>
					<div id="btn-right" onclick="clearUnOrderItem()"></div>
				</div>
				<div class="panel" id="pnl-ord">
					<div class="pnl-inner" id="pnl-order">
						<!--
						<div class="order-item">
							<div class="order-item-detail">
								Chicken
							</div>
							<div class="order-item-action" onclick=""></div>
						</div>
						-->
					</div>
				</div>
			</div>
			<div id="right-side">
				<div class="header-sub">
					Menu
				</div>
				<div id="sl-cat-wrapper">
					
					<div style="float:left;line-height:2.5em;padding-left:3em;">Category :</div> 
					<div class="small-box">
					<select id="sl-category" onchange="change_sl_cat()">
						
					</select>
					</div>
					
					<div class="panel" id="pnl-menu">
					<div class="pnl-inner" id="pnl-menu-inner">
						
					</div>
				</div>
				</div>
			</div>
			
		</div>
		<script>
			function addOrderItem2(name){
				if(typeof name=="number"){
					var id=name;
					for(var j=0;j<Items.length;j++){
						if(id==Items[j].ID){
							name=Items[j].Name;
							break;
						}
					}
					addOrderItem(name);
				}
				if(typeof name=="string"){
					var oldI=$(".order-item[itemName='"+name+"']");
					if(oldI.length==0){
						var rid=randomID(10);
						var num=1;
						var html=''
							html+='<div class="order-item" itemName="'+name+'" itemID="" id="'+rid+'" num="1">'
								html+='<div class="order-item-detail">'
									html+=name;
								html+='</div>'
								html+='<div class="order-item-action" onclick="removeOrderItem(this)"></div>';
								html+='<div class="order-item-number" onclick="">'+1+'</div>';
							html+='</div>'
						$("#pnl-order").append(html);
						var added=$("#"+rid)
						added.hide();
						added.show(300);
					}else{
						var num=parseInt(oldI.attr("num"));
						num++;
						oldI.attr("num",num);
						oldI.find(".order-item-number").attr("innerHTML",num);
						blink(oldI)
					}
				}
				if(typeof name=="object"){
					var mnio=$(name).parent(".menu-item");
					var itemName=mnio.attr("itemName")
					addOrderItem(itemName);
				}
			}
			function addOrderItem(name,id,quantity,stack,aa){
				//console.log(name+"|"+id+"|"+quantity+"|"+stack+"|"+aa)
				//console.log(typeof name);
				if(typeof name=="number"){
					var id=name;
					for(var j=0;j<Items.length;j++){
						if(id==Items[j].ID){
							name=Items[j].Name;
							break;
						}
					}
					addOrderItem(name,id,quantity,stack,aa);
					return;
				}
				if(typeof name=="string"){
					
					var oldI=$(".order-item[itemID='"+id+"'][stack='true']");
					/*var oldI=$(".order-item[itemID='"+id+"']");
					var lastI=oldI.eq(oldI.length-1);
					console.log(lastI.attr("stack"));
					if((oldI.length==0||lastI.attr("stack")=="false")){*/
					if((oldI.length==0)){
						var rid=randomID(10);
						var num=1;
						var html=''
							html+='<div class="order-item" itemName="'+name+'" stack="'+aa+'" itemID="'+id+'" id="'+rid+'" num="1">'
								html+='<div class="order-item-detail">'
									html+=name;
								html+='</div>'
								if(aa==true)html+='<div class="order-item-action" onclick="removeOrderItem(this)"></div>';
								else html+='<div style="width:28px;height:28px;float:right;"></div>';
								html+='<div class="order-item-number" onclick="">'+quantity+'</div>';
							html+='</div>'
						$("#pnl-order").append(html);
						var added=$("#"+rid)
						added.hide();
						added.show(300);
					}else{
						var num=parseInt(oldI.attr("num"));
						num++;
						oldI.attr("num",num);
						oldI.find(".order-item-number").attr("innerHTML",num);
						blink(oldI)
					}
				}
				if(typeof name=="object"){
					var mnio=$(name).parent(".menu-item");
					var itemName=mnio.attr("itemName")
					var itemID=mnio.attr("itemID")
					addOrderItem(itemName,itemID,1,true,true);
				}
			}
			function removeOrderItem(o){
				if(typeof o=="string"){
					
				}
				if(typeof o=="object"){
					var pit=$(o).parent(".order-item");
					if(pit.attr("stack")=="true"){
						pit.hide(500,function(){
							pit.remove();
						})
					}else{
						//var id=pit.
						var path="../../WaiterService/CancelItem.aspx?logedin=yes&ItemID="+tid;
						$.ajax({
							url:path,
							success:function(data){
								eval("dt="+data);
								var items=dt.Rows;
								for(var i=0;i<items.length;i++){
									var item=items[i]
										addOrderItem(item.Product,null,item.Quantity,false,true)
								}
							}
						})
					}
				}
			}
			function clearUnOrderItem(){
				
				$(".order-item[stack=true]").fadeOut(100,function(){
					$(".order-item[stack=true]").remove();
				})
			}
			function clearOrderItem(){
				
				$(".order-item").fadeOut(200,function(){
					$(".order-item").remove();
				})
			}
			function loadOrder(){
				var path="../../WaiterService/OrderedItems.aspx?logedin=yes&TableID="+tid;
				$.ajax({
					url:path,
					success:function(data){
						eval("dt="+data);
						var items=dt.Rows;
						for(var i=0;i<items.length;i++){
							var item=items[i]
								addOrderItem(item.Product,null,item.Quantity,false,true)
						}
					}
				})
			}
			function addMenuItem(name,id,price,imgdata){
				var rid=randomID(10);
				var html=''
					html+='<div class="menu-item" itemName="'+name+'" itemID="'+id+'" itemPrice="'+price+'" id="'+rid+'">'
					if(imgdata!=null)
					html+='<img style="float:left" width="40px" height="40px" src="data:image/png;base64,'+imgdata+'" />';
					else html+='<div style="float:left;height:40px;width:40px"></div>'
						html+='<div class="menu-item-detail">'
							html+=name
						html+='</div>'
						html+='<div class="menu-item-action" onclick="addOrderItem(this)"></div>'
						html+='<div class="menu-item-price">$'+price+'</div>'
					html+='</div>'
				
				$("#pnl-menu-inner").append(html);
				$("#"+rid).hide();
				$("#"+rid).show(200);
			}
			function clearMenuItem(){
				$(".menu-item").remove();
				return;
				$(".menu-item").fadeOut(200,function(){
					$(".menu-item").remove();
				})
			}
			function change_sl_cat(){
				clearMenuItem();
				var catvl=parseInt($("#sl-category").attr("value"));
				for(var i=0;i<Items.length;i++){
					if(Items[i].Category==catvl){
						var name=Items[i].Name;
						var price=parseFloat(Items[i].MenuPrice);
						var imgdata=Items[i].Image;
						var id=Items[i].ID
						addMenuItem(name,id,price,imgdata);
					}
				}
				
			}
			function loadCategories(){
				var json_path="ex/cat.txt";
				$.ajax({
					url:json_path,
					success:function(data){
						eval("dt="+data);
						for(var i=0;i<dt.Rows.length;i++){
							$("#sl-category").append("<option value="+dt.Rows[i].ID+">"+dt.Rows[i].Name+"</option>")
						}
					}
				})
			}
			function loadMenu(){
				var json_path="../../WaiterService/MenuList.aspx?logedin=yes";
				$.ajax({
					url:json_path,
					success:function(data){
						eval("dt="+data);
						var cats=dt.Categories.Rows
						Items=dt.MenuItem.Rows
						for(var i=0;i<cats.length;i++){
							var cat=cats[i];
							$("#sl-category").append("<option value="+cat.ID+">"+cat.Name+"</option>")
						}
						
						loadOrder();
					}
				})
			}
			/*
			addOrderItem("Soup");
			addOrderItem("Chicken");
			addOrderItem("Cow");
			addOrderItem("Sheep");
			addOrderItem("Pig");
			addOrderItem("Egg");
			*/
			//addMenuItem("Chicken",2.99);
			//addMenuItem("Rice",2.99);
			//addMenuItem("Vegetable",5.99);
			
			function update(){
				var json_path="../../WaiterService/PlaceOrder.aspx?logedin=yes&ProductID=$pid&Quantity=$quantity&TableID=$tid&WaiterID=$wid";
				var placeItems=$(".order-item[stack=true]")
				//gonsole.log(placeItems)
				for(var i=0;i<placeItems.length;i++){
					var item=placeItems.eq(i);
					var path=json_path;
					path=path.replace("$pid",item.attr("itemid"));
					path=path.replace("$quantity",item.attr("num"));
					path=path.replace("$tid",tid);
					path=path.replace("$wid",idv);
					
					$.ajax({
					url:path,
					success:function(data){
						eval("dt="+data);
						if(dt.Success==true){
							
						}else{
							alert("Error");
						}
					}
				})
				}
				setTimeout(function(){
					clearOrderItem();
					setTimeout(function(){loadOrder();},300)
				},300)
			}
			function bill(){
				clearUnOrderItem();
				var json_path="../../WaiterService/TableStatus.aspx?logedin=yes&SetTableDirty="+tid;
				$.ajax({
					url:json_path,
					success:function(data){
						eval("dt="+data);
						if(dt.Success)alert("Waiting for bill please .")
						else alert("Error");
					}
				})
			}
			loadMenu();
			$(document).ready(function(){
				setTimeout("change_sl_cat()",1000);
			})
		</script>
	</body>
</html>